<template>

	<div class="scheduling-course">
		<el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="60px">
			<el-form-item label="老师" prop="teacherId">
				<group-select v-model="queryParams.teacherId" :group_list="['user']" :group_query="teacherGroupQuery"
					placeholder="点击选择老师" @userListChange="teacherListChange" />
			</el-form-item>
			<!-- <el-form-item label="日期" prop="dateTime">
				<el-date-picker clearable size="small" v-model="queryParams.dateTime" type="daterange"
					value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
					:picker-options="getpickerOptions()">
				</el-date-picker>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="course">
			<el-table :data="tableData" style="width: 100%" :max-height="tableHeight">
				<el-table-column align="center" fixed prop="section" label="课节" min-width="150">
					<template slot-scope="scope">
						<span>{{ `第${$common.convertToChineseNumber(scope.row.section)}节` }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" :label="`${getDayOfWeek(item)}`" width="200"
					v-for="(item, index) in column_num" :key="index">
					<template slot-scope="scope">
						<div class="section-item-v">
							<temporaryvariable :variable="getCourse(item, scope.row.section)">
								<template v-slot:default="{ variable }">
									<div class="section-item">
										<el-tooltip class="item" effect="dark" content="" placement="top-start"
											v-if="variable">
											<div slot="content">
												课程：{{ variable.curriculumVo.name }}<br />
												老师：{{ variable.teacherVo.nickName }}<br />
												学生：{{ variable.studentVo.name }}<br />
												时间：{{ variable.startHour }}-
												{{ variable.endHour }}<br />
											</div>
											<div class="section-item-ul" @click="schedulingUpdate(variable.id)">
												<div class="section-item-li">
													<div class="section-item-title">课程：</div>
													<div class="section-item-value">
														{{ variable.curriculumVo.name }}
													</div>
												</div>
												<div class="section-item-li">
													<div class="section-item-title">老师：</div>
													<div class="section-item-value">
														{{ variable.teacherVo.nickName }}
													</div>
												</div>
												<div class="section-item-li">
													<div class="section-item-title">学生：</div>
													<div class="section-item-value">
														{{ variable.studentVo.name }}
													</div>
												</div>
												<div class="section-item-li">
													<div class="section-item-title">时间：</div>
													<div class="section-item-value">
														{{ variable.startHour }} -
														{{ variable.endHour }}
													</div>
												</div>
												<div class="section-item-operation">
													<el-button type="primary" size="mini" plain @click.stop="recordUpdate(null, {
			teacherId: variable.teacherId,
			studentId: variable.studentId,
			curriculumId: variable.curriculumId,
			courseDuration: variable.courseDuration,
			lessonHours: variable.lessonHours,
			startHour: variable.startHour,
			endHour: variable.endHour,
		})">核销</el-button>
													<el-button type="danger" size="mini" plain
														@click.stop="schedulingDelete(variable)">删除</el-button>
												</div>
											</div>
										</el-tooltip>
										<el-button v-else-if="operate" size="small"
											style="border-color: #E6E6E6;color: #CC5252;" @click="schedulingUpdate(null, {
			section: `${scope.row.section}`,
			teacherId: queryParams.teacherId,
			week: `${item}`
		})">设置</el-button>

									</div>

								</template>
							</temporaryvariable>

						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<schedulingDialog ref="schedulingDialog" @refresh="handleQuery"></schedulingDialog>
		<recordDialog ref="recordDialog"></recordDialog>
	</div>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission";
import { schedulingList } from "@/api/common";
import { delScheduling } from "@/api/jiaopei/scheduling";
import groupSelect from "@/views/components/groupSelect";
import temporaryvariable from "@/views/components/temporaryvariable";
import schedulingDialog from "@/views/jiaopei/scheduling/dialog";
import recordDialog from "@/views/jiaopei/record/dialog";
import store from '@/store'
export default {
	name: "schedulingCourse",
	props: {
		banId: {
			default: null
		},
		//类型 排期scheduling
		type: {
			default: 'scheduling',
		},
		//是否可操作
		operate: {
			default: true,
		},
		tableHeight: {
			default: '600px',
		},
	},
	components: {
		temporaryvariable,
		groupSelect,
		schedulingDialog,
		recordDialog,
	},
	computed: {
		teacherGroupQuery() {
			var value = {
				'user': {
					teacher: '0,1'
				}
			}
			return value
		}
	},
	watch: {
		schedulingList: {
			handler(newValue, oldValue) {
				// console.log('排课数据变更', newValue);
				var list = {};
				for (let index = 1; index <= this.column_num; index++) {
					list[index] = {};
				}
				newValue.forEach(element => {
					if (list[element.week]) {
						list[element.week][element.section] = element;
					}
				});

				this.handleSchedulingList = list;
				console.log('列表', this.handleSchedulingList);
			},
			deep: true,
			immediate: true
		},
	},
	data() {
		return {
			queryParams: {
				teacherId: this.teacherId,//老师
				dateTime: null,//时间区间
			},
			section_num: 0,//课程节数用来控制每日最大节数
			tableData: [],//日期列表用来设置行数和确定每行的日期
			handleSchedulingList: {},//处理排期列表
			schedulingList: [],//排期列表
			startDate: null,
			endDate: null,
			dialogShow1: false,
			column_num: 7,
		};
	},
	created() {
		this.init();
	},
	mounted() {

	},
	methods: {
		init() {
			this.section_num = store.getters.section_num;
			this.resetForm("queryForm");
			this.handleQuery();

			//生成列表
			var tableData = [];
			for (let index = 1; index <= this.section_num; index++) {
				tableData.push({
					section: index
				});
			}
			this.tableData = tableData;

		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.queryForm.resetFields();
			this.resetForm("queryForm");
			this.handleQuery();
		},
		/** 搜索按钮操作 */
		handleQuery() {
			var queryParams = this.queryParams;

			if (!queryParams.teacherId) {
				// this.$message({
				// 	showClose: true,
				// 	message: `请选择要查看的班级`,
				// 	type: 'error'
				// });
				return;
			}


			//生成列表
			// var defaultDateTime = this.getDefaultDateTime();
			// var startDate = queryParams.dateTime ? queryParams.dateTime[0] : null;
			// var endDate = queryParams.dateTime ? queryParams.dateTime[1] : null;

			// if (!startDate || !endDate) {
			// 	startDate = defaultDateTime[0];
			// 	endDate = defaultDateTime[1];
			// }
			// this.getTableData(startDate, endDate);

			var query = {
				teacherId: queryParams.teacherId,
				startDay: this.startDate,
				endDay: this.endDate,
			};

			var type = this.type;
			if (type == 'scheduling') {
				this.getSchedulingList(query);
			}
		},

		//获取日期表格
		getTableData(startDate, endDate) {
			this.startDate = startDate;
			this.endDate = endDate;
			var dateRange = this.$common.getDateRange(startDate, endDate, true);
			var tableData = [];
			dateRange.forEach(element => {
				tableData.push({
					date: element
				});
			});
			this.tableData = tableData;
		},
		//获取排课列表
		getSchedulingList(query) {
			schedulingList(query).then(response => {
				this.schedulingList = response.rows;
			});
		},
		//更新排课信息
		schedulingUpdate(id, form) {
			var operate = this.operate;
			if (!operate) {
				return;
			}

			var isCheckPermi = true;
			if (id) {
				isCheckPermi = checkPermi(['jiaopei:scheduling:edit']);
			} else {
				isCheckPermi = checkPermi(['jiaopei:scheduling:add']);
			}
			if (!isCheckPermi) {
				if (!id) {
					this.$message.error('无权操作');
				}
				return;
			}

			this.$refs.schedulingDialog.show(id, false, form);
		},
		//更新核销信息
		recordUpdate(id, form) {
			
			var operate = this.operate;
			if (!operate) {
				return;
			}

			var isCheckPermi = true;
			if (id) {
				isCheckPermi = checkPermi(['jiaopei:record:edit']);
			} else {
				isCheckPermi = checkPermi(['jiaopei:record:add']);
			}
			if (!isCheckPermi) {
				if (!id) {
					this.$message.error('无权操作');
				}
				return;
			}

			this.$refs.recordDialog.show(id, false, form);
		},
		/** 删除按钮操作 */
		schedulingDelete(row) {
			const ids = row.id || this.ids;
			this.$modal.confirm('是否确认删除？').then(() => {
				return delScheduling(ids);
			}).then(() => {
				this.init();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {
			}).finally(() => {
			});
		},
		//获取默认时间
		getDefaultDateTime() {
			var dateRange = this.$common.getDateRangeByType('week');
			// var dateRange = this.$common.getDateRangeByType('day');
			var defaultDateTime = [
				this.parseTime(dateRange[0].getTime(), '{y}-{m}-{d}'),
				this.parseTime(dateRange[1].getTime(), '{y}-{m}-{d}'),
			];
			// var defaultDateTime = [
			// 	'2024-05-08',
			// 	'2024-05-13',
			// ];
			return defaultDateTime;
		},
		//获取课程详情
		getCourse(week, section) {
			var type = this.type;
			var handleSchedulingList = this.handleSchedulingList;//排期列表
			var value = null;
			var dateData = {};

			if (type == 'scheduling') {
				dateData = handleSchedulingList;
			}

			if (dateData[week] && dateData[week][section]) {
				value = dateData[week][section];
			}

			return value;
		},
		getpickerOptions() {
			var that = this;
			return {
				shortcuts: [{
					text: '本周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week');
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '下周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', 1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', -1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上上周',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('week', -2);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '本月',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('month');
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '上月',
					onClick(picker) {
						var dateRange = that.$common.getDateRangeByType('month', -1);
						const start = dateRange[0];
						const end = dateRange[1];
						picker.$emit('pick', [start, end]);
					}
				},
					// {
					// 	text: '本年',
					// 	onClick(picker) {
					// 		var dateRange = that.$common.getDateRangeByType('year');
					// 		const start = dateRange[0];
					// 		const end = dateRange[1];
					// 		picker.$emit('pick', [start, end]);
					// 	}
					// }, 
					// {
					// 	text: '去年',
					// 	onClick(picker) {
					// 		var dateRange = that.$common.getDateRangeByType('year', -1);
					// 		const start = dateRange[0];
					// 		const end = dateRange[1];
					// 		picker.$emit('pick', [start, end]);
					// 	}
					// }
				]
			};
		},
		teacherListChange(list) {
			if (!this.teacherId && !this.queryParams.teacherId) {
				if (list && list.length > 0) {
					this.queryParams.teacherId = list[0].userId + ``;
					this.handleQuery();
				}
			}
		},
		getDayOfWeek(num) {
			var days = ['无', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
			return days[num];
		}
	}
};
</script>

<style lang="scss" scoped>
.section-item-v {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.section-item {
	width: 100%;
	width: 190px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.section-item-ul {
		width: 100%;
		padding: 0 20px;
	}

	.section-item-li {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.section-item-operation {
		width: 100%;
		// margin: 10px 0;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.section-item-title {
		font-weight: 400;
		font-size: 14px;
		color: #9A5C5C;
	}

	.section-item-value {
		font-size: 14px;
		color: #333333;
		line-height: 20px;
		flex: 1; // flex布局分配空间
		min-width: 0; // 取消浏览器默认设置
		text-align: left;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.evaluate-tag {
		width: 76px;
	}
}

::v-deep .evaluate-info-dialog .el-dialog__body {
	padding: 0 30px !important;
}

.evaluate-info-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 20px 0;

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 40px;

		.label {
			font-weight: 400;
			font-size: 14px;
			color: #9A5C5C;
			line-height: 20px;
		}

		.value {
			margin-left: 5px;
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			line-height: 20px;
		}
	}
}
</style>